<template>
  <Modal v-model="show" :styles="styles" :class-name="className"
         :closable="closable"
         :mask-closable="maskClosable"
         :marginTop="marginTop"
         :z-index="zIndex"
         @on-visible-change="onVisibleChange">
    <div slot="header" :class="center ? 'center' : ''" class="modal-header">
      
      <slot name="header">
        <span class="ml_10" >{{ title }}</span>
      </slot>
      <div class="modal-header-fullscreen" v-if="showFullscreen">
        <Icon type="ios-expand" color="#999" size="17" v-if="!fullscreen" @click="fullscreen = !fullscreen"/>
        <Icon type="ios-contract" color="#999" size="17" v-if="fullscreen" @click="fullscreen = !fullscreen"/>
      </div>
    </div>
    <slot v-if="show"></slot>
    <div slot="footer">
      <slot name="footer">
        <div class="modal-footer">
          <cus-button size="small" class="mr_2" @onClick="onCancel" v-if="showCancelBtn">{{ cancelBtnName }}</cus-button>
          <cus-button :type="otherBtnType" size="small" @onClick="onOther" v-if="showOtherBtn">{{ otherBtnName }}</cus-button>
          <cus-button type="primary" size="small" @onClick="onOk" v-if="showOkBtn">{{ okBtnName }}</cus-button>
        </div>
      </slot>
    </div>
    <Spin fix v-if="loading"></Spin>
  </Modal>
  
</template>

<script>
export default {
  name: 'cus-modal',
  data () {
    return {
      fullscreen: false,
      show: false,
    }
  },
  props: {

    title: {
      type: String,
      default: '添加'
    },
    okBtnName: {
      type: String,
      default: '确认'
    },
    showOkBtn: {
      type: Boolean,
      default: true
    },
    otherBtnName: {
      type: String,
      default: '保存'
    },
    showOtherBtn: {
      type: Boolean,
      default: false
    },
    otherBtnType: {
      type: String,
      default: 'primary'
    },
    cancelBtnName: {
      type: String,
      default: '取消'
    },
    showCancelBtn: {
      type: Boolean,
      default: true
    },
    width: {
      type: [String, Number],
      default: 700
    },
    zIndex: {
      type: Number,
      default: 1000,
    },
    marginTop: {
      type: [String, Number],
      default: 0
    },
    showFullscreen: {
      type: Boolean,
      default: false
    },
    closable: {
      type: Boolean,
      default: true,
    },
    maskClosable: {
      type: Boolean,
      default: true
    },
    // 标题是否居中
    center: {
      type: Boolean,
      default: false
    },
    loading: {
     type: Boolean,
     default: false
    },
  },
  computed: {
    styles () {
      let style = {}
      if (!this.fullscreen) {
        /*if (style.width.indexOf('px') !== -1 || style.width.indexOf('%') !== -1 || style.width.indexOf('vw') !== -1 || style.width.indexOf('vh') !== -1 || style.width.indexOf('rem') !== -1) {
          style.width = `${this.width}`;
        } else style.width = `${this.width}px`;*/
        if(this.width< 100) {
          style.width = `${this.width}%`
        } else {
          style.width = `${this.width}px`
        }
        this.marginTop ? style.top = this.marginTop : '';
      } else {
        style.width = '100%'
        style.top = 0
      }
      return style
    },
    className () {
      if (this.fullscreen) {
        return 'fullscreen-modal'
      } else {
        return ''
      }
    }
  },
  methods: {
    onOk () {
      this.$emit('onOk')
    },
    onCancel () {
      this.show = false;
      this.$emit('onCancel')
    },
    onOther () {
      this.$emit('onOther')
    },
    onVisibleChange (v) {
      this.$emit('on-visible-change', v)
    }
  }
}
</script>

<style lang="less">
.center {
  justify-content: center;
}
.modal-header {
  display: flex;
  align-items: center;
  position: relative;
  height: 20px;
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);

  &-fullscreen {
    position: absolute;
    right: 30px;
    cursor: pointer;

    i:hover {
      color: black !important;
    }
  }
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>
